<template>
  <div class="app-container">
       <div class="box top">
         <h1>MBR膜在线预警系统</h1>
       </div>
       <div class="box center">
          <!-- 四吨 -->
          <div class="ton ton-four">
            <el-row style="width: 40%">
              <el-col :span="4"><div class="font">4吨</div></el-col>
              <el-col :span="10"><img class="ton-img" :src="item%2==0?blue:red" v-for="(item,index) in tonFour.left"></el-col>
              <el-col :span="10"><img class="ton-img" :src="item%2==0?blue:red" v-for="(item,index) in tonFour.right"><div class="grid-content bg-purple-light"></div></el-col>
            </el-row>
          </div>
          <!-- 六吨 -->
         <div class="ton ton-six">
           <el-row style="width: 40%">
             <el-col :span="4"><div class="font">6吨</div></el-col>
             <el-col :span="10"><img class="ton-img" :src="item%2==0?blue:red" v-for="(item,index) in tonSix.left"></el-col>
             <el-col :span="10"><img class="ton-img" :src="item%2==0?blue:red" v-for="(item,index) in tonSix.right"><div class="grid-content bg-purple-light"></div></el-col>
           </el-row>
         </div>
       </div>
       <div class="box bottom">
            <div class="bottom-left">
              <el-table  :data="tableData1" :header-cell-style="{background: '#008080', color: 'white' }">
                <el-table-column label=""       align="center" prop="name"  />
                <el-table-column label="24h<"   align="center" prop="middle" />
                <el-table-column label="12<"    align="center" prop="small" />
                <el-table-column label="当前"    align="center" prop="curr" />
                <el-table-column label=">48h"   align="center" prop="high" />
              </el-table>
              <el-table  :data="tableData2" style="width: 80%" :header-cell-style="{background: '#008080', color: 'white' }">
                <el-table-column label=""     align="center" prop="name"  />
                <el-table-column label=""     align="center" prop="value"  />
                <el-table-column label=""     align="center" prop="unity" />
              </el-table>
            </div>
            <div class="bottom-right">
                 <div class="chart" id="wate-rate">
                   <line-chart2 :chart-data="rateChartData" height="25vh" width="100%"/>
                 </div>
                 <div class="chart" id="press-diff">
                   <line-chart2 :chart-data="pressChartData" height="25vh" width="100%"/>
                 </div>
                 <div class="chart" id="water-flow">
                   <line-chart2 :chart-data="waterChartData" height="25vh" width="100%"/>
                 </div>
            </div>
       </div>
  </div>
</template>
<script>
import bluePNG from '@/assets/bigscreen/blue.png';
import redPNG from '@/assets/bigscreen/red.png';
import LineChart2 from '../../dashboard/LineChart2';


const tempRateData = {
  yData: [100, 120, 161, 134, 105, 160, 165],
}
const tempPressData = {
  yData: [10, 20, 161, 30, 50, 160, 12],
}
const tempWaterData = {
  yData: [15, 12, 25, 75, 53, 43, 37],
}

const lineRateData = {
  xData:['12:00', '13:00', '14:00', '15:00', '18:00', '19:00', '20:00'],
  legend:{
    data: ['透水率'],
    textStyle:{
      color:'#c73d64'
    }},
  xAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  yAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  series:[
    {
      name: '透水率',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#c73d64',
          lineStyle: {
            color: '#c73d64',
            width: 2
          },
        }
      },
      data: tempRateData.yData,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ],
}
const linePressData = {
  yData: tempPressData.yData,
  xData:['12:00', '13:00', '14:00', '15:00', '18:00', '19:00', '20:00'],
  xAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  yAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  legend:{
    data: ['跨膜压差'],
    textStyle:{
      color:'#e0d842'
    }
  },
  series:[
    {
      name: '跨膜压差',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#e0d842',
          lineStyle: {
            color: '#e0d842',
            width: 2
          },
        }
      },
      data: tempPressData.yData,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ],
}
const lineWaterData = {
  yData: tempWaterData.yData,
  xData:['12:00', '13:00', '14:00', '15:00', '18:00', '19:00', '20:00'],
  xAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  yAxis: {
    axisLabel:{
      textStyle:{
        color:'white'
      }
    },
    axisLine: {
      show:true,//是否显示轴线
      lineStyle: {
        color: 'white',//刻度线的颜色
      }
    }
  },
  legend:{
    data: ['产水流量'],
    textStyle:{
      color:'#973dc7'
    }
  },
  series:[
    {
      name: '产水流量',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#973dc7',
          lineStyle: {
            color: '#973dc7',
            width: 2
          },
        }
      },
      data: tempWaterData.yData,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ],
}
export default {
  name: "Bigscreen",
  components:{
    LineChart2
  },
  data() {
    return {
      rateChartData:lineRateData,
      pressChartData:linePressData,
      waterChartData:lineWaterData,
         tonFour:{
             left:[2,4,6,8],
             right:[5,6,7,8],
         },
        tonSix:{
          left:[2,4,6,8],
          right:[5,6,7,8],
        },
        blue:bluePNG,
        red:redPNG,
        tableData1:[{
           name:"透水率",
          small:"20",
          middle:"60",
          high:"40",
          curr:"35"
        },
          {
            name:"跨膜压差",
            small:"2",
            middle:"6",
            high:"7",
            curr:"3"
          }],
        tableData2:[{
          name:"产水流量",
          value:"4.58",
          unity:"M³/h"
        },
          {
            name:"产水压力",
            value:"5",
            unity:"KPa"
          },
          {
            name:"膜擦洗气量",
            value:"4526.6",
            unity:"M³/h"
          },
          {
            name:"污泥浓度",
            value:"10.6",
            unity:"mg/l"
          },
          {
            name:"溶解氧",
            value:"5.36",
            unity:"mg/l"
          },
          {
            name:"跨膜压差",
            value:"-2.36",
            unity:"KPa"
          },
          {
            name:"透水率",
            value:"32.43",
            unity:"LMH/bar"
          },
          {
            name:"温度校正透水率",
            value:"27.15",
            unity:"LMH/bar"
          },
          {
            name:"透水率衰减速度",
            value:"27.15",
            unity:".MH(bar-d)"
          },
          {
            name:"水温",
            value:"27.15",
            unity:"℃"
          }],


    }
  },
  created() {

  },
  methods:{

  }
};
</script>

<style scoped="scoped">
    .app-container{
      height: calc(100vh - 84px);
      background-color: #008080;
      overflow: auto;
      color: #cdddf7;
    }
    .box{
      width: 100%;
    }
    .top{
      height: 7%;
      text-align: center;
      margin: 0px;
    }
    .center{
      height: 20%;
      display: inline;
      text-align: left;
    }
    .bottom{
      height: 80%;
      display: flex;
    }
    .bottom-left{
      width: 25%;
      height: 100%;
    }

    .bottom-right{
      width: 75%;
      height: 100%;
      float: right;
      padding: 20px;
      display: inline-block;
      border-radius: 3px;
      position: relative;
 }
    .chart{
      height: 33%;
      width: 100%;
      padding: 10px;
    }


    .top>h1 {
      color: #cdddf7;
      font-size: 40px;
      font-weight: 900;
      letter-spacing: 5px;
      margin: 0px;
    }
    .ton{
       height: 50px;
       font-size: 25px;
       font-weight: bold;
    }
    .ton-img{
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .font{
       line-height: 50px;
      margin-left: 20px;
    }

   /* 表头背景色 */
    ::v-deep .el-table tr{
      background-color: #008080;
      color: white;
    }

    /* 鼠标在单元格浮动，背景色不变 */
    ::v-deep  .el-table tbody tr:hover>td {
      background-color:#008080!important
    }

    /* 去掉中间数据的分割线 */
    ::v-deep  .el-table__row>td{
      border: none;
    }
    /* 去掉上面的线 */
    ::v-deep .el-table th.is-leaf{
      border: none;
    }
    /* 去掉最下面的那一条线 */
    ::v-deep  .el-table::before {
      height: 0px;
    }



</style>
